<!-- 课程表单弹窗 -->
<form id="course-form" lay-filter="course-form" class="layui-form model-form">
	<input name="id" type="hidden" />
	<div class="layui-form-item">
		<label class="layui-form-label">课程名称</label>
		<div class="layui-input-block">
			<input name="title" placeholder="请输入课程名称" type="text" class="layui-input" maxlength="20" lay-verify="required"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">课程图片</label>
<!--		<div class="layui-upload-drag" id="courseImg">-->
<!--			<i class="layui-icon"></i>-->
<!--			<p>点击上传，或将图片拖拽到此处</p>-->
<!--			<div class="layui-hide" id="courseImgView">-->
<!--				<hr>-->
<!--				<img style="max-width: 196px" alt="上传成功后渲染" id="courseImgUrl" src="">-->
<!--			</div>-->
<!--		</div>-->
		<div class="layui-upload layui-input-block">
			<input type="hidden" name="courseImgUrl" required lay-verify="required" />
			<button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
		</div>
		<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			预览图：
			<div class="layui-upload-list" id="demo2"></div>
		</blockquote>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">课程类型</label>
		<div class="layui-input-block">
			<select name="courseType" id="courseType" lay-verify="required" lay-filter="type">
				<option value="-1"></option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">代课老师</label>
		<div class="layui-input-block">
			<select name="teacher" id="teacher" lay-filter="type" lay-verify="required">
				<option value="-1"></option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">课程人数</label>
		<div class="layui-input-block">
			<input name="num" placeholder="请输入课程人数" type="text" class="layui-input" maxlength="20" lay-verify="required"/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">课程内容</label>
		<div class="layui-input-block">
			<textarea name="content" placeholder="请输入课程内容" type="text" class="layui-input"/>
		</div>
	</div>
	<div class="layui-form-item model-form-footer">
		<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
		<button class="layui-btn" lay-filter="course-form-submit" lay-submit>保存</button>
	</div>
</form>

<script>
	layui.use(['layer', 'admin', 'form','config','upload'], function() {

		var layer = layui.layer;
		var admin = layui.admin;
		var form = layui.form;
		var config = layui.config;
		var upload = layui.upload;

		//文件上传
		upload.render({
			elem: '#fileBtn' ,
			url:  config.base_server + 'api-file/files-anon',
			accept: 'file' ,
			auto: true ,
			before: function(obj){
				layer.load(); //上传loading
				this.data={access_token:config.getToken().access_token};
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$(".layui-upload-img").remove();
					$('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
				});
			},
			done: function(data){
				layer.closeAll('loading');
				console.log(data);
				$("[name=courseImgUrl]").val(data.url);
			},
			error: function (data) {
				layer.closeAll('loading');
			}
		});

		// 获取所有课程类型
		layer.load(2);
		admin.req('api-course/courseType/getSelectCourseTypes', {}, function(data) {
			layer.closeAll('loading');
			if (0 == data.code) {
				$.each(data.data, function(index, item) {
					$('#courseType').append(new Option(item.name, item.id)); //往下拉菜单里添加元素
				});
				form.render(); //菜单渲染 把内容加载进去
			} else {
				layer.msg('获取课程类型失败', {
					icon: 2,
					time: 500
				});
			}
		}, 'post');

		// 获取所有老师
		layer.load(2);
		admin.req('api-user/user/getTeacher', {}, function(data) {
			console.log(data)
			layer.closeAll('loading');
			if (0 == data.code) {
				$.each(data.data, function(index, item) {
					$('#teacher').append(new Option(item.nickname, item.username)); //往下拉菜单里添加元素
				});
				form.render(); //菜单渲染 把内容加载进去
			} else {
				layer.msg('获取老师失败', {
					icon: 2,
					time: 500
				});
			}
		}, 'post');


		// 回显course数据
		var course = admin.getTempData('course');
		if (course) {
			console.log(course)
			$('#demo2').append('<img src="' + course.courseImgUrl + '" width="50px" height="50px" class="layui-upload-img">')
			form.val('course-form', course);
		}

		// 表单提交事件
		form.on('submit(course-form-submit)', function(data) {
			console.log(data)
			if (data.field.courseType === '-1' || data.field.courseType === '') {
				layer.msg("请选择称号类型", {
					icon: 2,
					time: 2000
				});
				return false;
			}

			layer.load(2);

			if (data.field.id != null && data.field.id != '') {
				admin.req('api-course/course/updateCourse', JSON.stringify(data.field), function(data) {
					layer.closeAll('loading');
					if (data.code == 0) {
						layer.msg(data.msg, {
							icon: 1,
							time: 2000
						});
						admin.finishPopupCenter();
					} else {
						layer.msg(data.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, 'POST');
				return false;
			} else {
				admin.req('api-course/course/addCourse', JSON.stringify(data.field), function(data) {
					layer.closeAll('loading');
					if (data.code == 0) {
						layer.msg(data.msg, {
							icon: 1,
							time: 2000
						});
						admin.finishPopupCenter();
					} else {
						layer.msg(data.msg, {
							icon: 2,
							time: 2000
						});
					}
				}, 'POST');
				return false;
			}

		});

	});
</script>
